<template>
  <div class="main_header">
    <div class="center">
      <div class="head">
        <div class="logo">
          <router-link to="/">
            <img src="../assets/img/logo.png" />
          </router-link>
        </div>
        <ul>
          <li><router-link to="/">首页</router-link></li>
          <li><a href="#">蛋糕</a></li>
          <li><router-link to="/ingredient">精选食材</router-link></li>
          <li><router-link to="/actives">最新活动</router-link></li>
        </ul>
        <div class="login" v-show="!uname">
          <span>
            <router-link to="/login">登录</router-link>
            |
            <router-link to="/reg">注册</router-link>
            |
            <a href="#">购物车</a>
          </span>
        </div>
        <div class="login" v-show="uname">
          <span>
            欢迎:{{ uname }}
            <button @click="updateUname(null)" class="back_btn">退出</button>
            <a href="#">购物车</a>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
export default {
  computed:{
    ...mapState(['uname'])
  },
  methods: {
   ...mapMutations(['updateUname'])
  },
};
</script>

<style lang="scss" scoped>
.back_btn{
  border: 1px solid #AA8764;
  padding: 2px 5px !important;
  border-radius: 3px;
  font-size: 12px;
  margin: 0 10px;
  background-color: transparent;
  cursor: pointer;
}
</style>
<style scoped src="../assets/css/login.css"></style>